import 'package:flutter/material.dart';
import 'package:spree/pages/games/rules_banner.dart';
import 'package:spree/utils/utils.dart';
import 'package:spree/widgets/common_container.dart';

class DiceRules extends StatefulWidget {
  DiceRules({Key? key}) : super(key: key);

  @override
  State<DiceRules> createState() => _DiceRulesState();
}

class _DiceRulesState extends State<DiceRules> with TickerProviderStateMixin {
  int _curIndex = 0;
  late TabController _tabController;
  final GlobalKey<RulesBannerState> _globalKey = GlobalKey();
  List _tabs = ["Rules", "Limites"];
  int _fIndex = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CommonContainer(
        child: ListView(
          padding: EdgeInsets.only(top: 20),
          children: [
            TabBar(
              controller: _tabController,
              tabs: _tabs.map((e) => Tab(text: e)).toList(),
              onTap: (i) {
                setState(() {
                  _fIndex = i;
                });
              },
            ),
            _fIndex == 0
                ? Column(
                    children: [
                      RulesBanner(
                        height: 300,
                        imageList: [
                          Column(
                            children: [
                              Container(
                                padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                                width: Utils().getScreenWidth(context),
                                decoration: BoxDecoration(
                                  color: Color(0xFF291F62),
                                  borderRadius: const BorderRadius.all(
                                      Radius.circular(8.0)),
                                ),
                                child: Image.asset(
                                    'images/games/dice/dice-info-1.png'),
                              ),
                              Container(
                                width: Utils().getScreenWidth(context),
                                height: 50,
                                margin: EdgeInsets.only(top: 20, bottom: 20),
                                child: ElevatedButton(
                                    style: ButtonStyle(
                                      backgroundColor:
                                          MaterialStateProperty.all(
                                              Color(0xFF3586FF)),
                                    ),
                                    onPressed: () {},
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: [
                                        Text('To Bet'),
                                        Text('R\$ 1000'),
                                      ],
                                    )),
                              ),
                              Text(
                                'Place a bet and predict a number Lucky controlling the Choose slider" Rotate over" or "Rotate under" the chosen number.',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18,
                                    fontWeight: FontWeight.w700),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                                width: Utils().getScreenWidth(context),
                                decoration: BoxDecoration(
                                  color: Color(0xFF291F62),
                                  borderRadius: const BorderRadius.all(
                                      Radius.circular(8.0)),
                                ),
                                child: Column(
                                  children: [
                                    Text(
                                      '33',
                                      style: TextStyle(
                                          color: Color(0xFF4992FF),
                                          fontSize: 36,
                                          fontWeight: FontWeight.w700),
                                    ),
                                    Padding(
                                      padding:
                                          EdgeInsets.only(top: 10, bottom: 10),
                                      child: Text(
                                        'Lucky Number',
                                        style: TextStyle(
                                            color: Colors.white,
                                            fontSize: 18,
                                            fontWeight: FontWeight.w700),
                                      ),
                                    ),
                                    Image.asset(
                                        'images/games/dice/dice-info-1.png'),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 20),
                                child: Text(
                                  'The random number generator will choose the winning number from 0 to 99. If the number luck is the chosen range, you win!',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700),
                                ),
                              ),
                            ],
                          )
                        ],
                        key: _globalKey,
                        index: _curIndex,
                        onchange: (i) {
                          setState(() {
                            _curIndex = i;
                          });
                        },
                      ),
                      _curIndex == 1
                          ? Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                  child: Text('Start the game')),
                            )
                          : Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    _globalKey.currentState?.jumpToPage(1);
                                    setState(() {
                                      _curIndex = 1;
                                    });
                                  },
                                  child: Text('Next')),
                            ),
                    ],
                  )
                : Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Bet:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 2,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Payment:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 4,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      )
                    ],
                  ),
          ],
        ),
      ),
    );
  }
}
